<template>
  <div class="admin-home">
    <div class="top">
      <div class="row user-number">
        <div class="img"> <img src="../../assets/用户.png" alt=""></div>
        <div class="user-number-title">用户总数: <span> {{ countNum.uCount}}人 </span></div>
      </div>
      <div class="row maintainer-number">
        <div class="img"> <img src="../../assets/维修员.png" alt=""></div>
        <div class="maintainer-number-title">维修员总数: <span> {{ countNum.mCount }}人</span></div>
      </div>
      <div class="row order-number">
        <div class="img"> <img src="../../assets/我的维修订单.png" alt=""></div>
        <div class="order-number-title">订单总数: <span> {{ countNum.oCount }}单</span></div>
      </div>
      <div class="row order-pice">
        <div class="img"> <img src="../../assets/钱币.png" alt=""></div>
        <div class="order-number-title">今日成交金额: <span> ￥{{ countNum.totalPice }}</span></div>
      </div>
    </div>
    <div class="content">
      <div ref="myChart" id="myChart"></div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { getCountService } from '@/api/admin'
export default {
  name: 'AdminHome',
  data () {
    return {
      xData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      count: [280, 300, 312, 320, 342, 360, 383],
      order: [100, 120, 80, 80, 70, 110, 130],
      pice: [687, 500, 700, 600, 500, 1500, 1000],
      countNum: {}
    }
  },
  created () {
    this.getCount()
  },
  mounted () {
    this.getEcharts()
  },
  methods: {
    getEcharts () {
      const chartDom = this.$refs.myChart
      const myChart = echarts.init(chartDom)
      myChart.showLoading()
      const option = {
        color: [
          '#37A2DA',
          '#32C5E9',
          '#67E0E3',
          '#9FE6B8',
          '#FFDB5C',
          '#ff9f7f',
          '#fb7293',
          '#E062AE',
          '#E690D1',
          '#e7bcf3',
          '#9d96f5',
          '#8378EA',
          '#96BFFF'
        ],
        title: {
          text: '每周数据'
        },
        legend: {
          data: ['用户', '订单', '成交金额']
        },
        xAxis: {
          type: 'category',
          data: this.xData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '用户',
            data: this.count,
            type: 'bar'
          },
          {
            name: '订单',
            data: this.order,
            type: 'bar'
          },
          {
            name: '成交金额',
            data: this.pice,
            type: 'bar'
          }
        ]
      }
      myChart.hideLoading()
      option && myChart.setOption(option)
    },
    getCount () {
      getCountService().then(res => {
        this.countNum = res.data
        console.log(res)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.admin-home {
    padding: 10px;
    background: #fff;
    height: 100%;
    .top{
        display: flex;
        justify-content: space-around;
        align-items: center;
        .row{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-right: 15px;
            flex: 1;
            height: 100px;
            line-height: 100px;
            padding: 0 20px;
            font-size: 18px;
            font-weight: 700;
            color: #fff;
            border-radius: 8px;
            // text-align: center;
            &:last-child{
                margin-right: 0;
            }
            .img{
                width: 55px;
                height: 55px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            span{
                font-size: 24px;
            }
        }
        .user-number{
            background: #F96868;
        }
        .maintainer-number{
            background: #33CABB;
        }
        .order-number{
            background: #926DDE;
        }
        .order-pice{
            background: #15C377;
        }
    }
    .content{
        margin-top: 20px;
        padding: 10px;
        width: 100%;
        #myChart{
            width: 100%;
            height: 500px;
        }
    }
}
</style>
